<template>
  <div class="optionIcon" @click="changeIcon">
    <component :is="iconName" class="icon" />
  </div>
      
        <el-menu
        active-text-color="#ffd04b"
        :router="true"
        background-color="#545c64"
        :default-active="$route.path"
        text-color="#fff" 
        :collapse="store.isMenuCollapse"
      >
      <template v-for="item1 in $router.options.routes">

        
     
        <el-menu-item :index="item1.path" v-auth:role="item1.meta?.roles" v-if="item1.children==undefined">
          <component :is="item1.meta?.icon" class="icon"/>
          <span>{{item1.meta?.title}}</span>
        </el-menu-item>

        <el-sub-menu :index="item1.path" v-else  v-auth:role="item1.meta?.roles" v-if="item1.meta?.isShow != false">
          <template #title>
            <component :is="item1.meta?.icon" class="icon"/>
            <span>{{item1.meta?.title}}</span>
          </template>
          <template v-for="item2 in item1.children">
            <el-menu-item :index="item2.path"  v-if="item2.meta?.isShow !=false">
              <component :is="item2.meta?.icon" class="icon" />
              {{item2.meta?.title}}
            </el-menu-item>
          </template>
            
        </el-sub-menu>
        </template>
      </el-menu>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { wmsStore } from '@/store/pinia'
const store = wmsStore()
const iconName = ref('Fold')
const changeIcon=()=>{
  iconName.value=iconName.value=="Fold"? 'Expand': 'Fold'
  store.isMenuCollapse = !store.isMenuCollapse
}
</script>
<style scoped>
.icon{
  width: 30px;
  height: 30px;
 
}
.el-menu{
  height: calc(100vh - 78px);
}
.optionIcon {
    text-align: center;
    background-color: #000000;
    color: #fff;
    cursor: pointer;

}
</style>